import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { TabBar, Icon } from 'weaver-mobile';
import EntrancePage from '../../tabPages/entrance';
import AboutPage from '../../tabPages/about';
import MessagePage from '../../tabPages/messasge';
import { toJS } from 'mobx';

@inject('homePageTestStore')
@withRouter
@observer
export default class Entrance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      fullScreen: false,
    };
  }


  componentDidMount() {
    // const { getMenuConfig } = this.props.homePageTestStore;
    // getMenuConfig();
  }

  onRefresh() {
    this.messagePage && this.messagePage.onRefresh();
  }

  render() {
    const { selectedTab, setState, menuConfig, activeKey, onChange,
      showGroup, disableMenu, isMenuInited } = this.props.homePageTestStore;

    return (
      <div className={'wm-home-entrance'}>
        <TabBar
          unselectedTintColor="#666"
          tintColor="#55b1f9"
          barTintColor="white"
        >
          <TabBar.Item
            title="消息"



            key="Message"
            icon={<Icon color={'#666'} type={'new-chat'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'new-chat'} size={'md'} />}
            selected={selectedTab === 'Message'}
            onPress={() => {
              this.onRefresh();
              setState({
                selectedTab: 'Message',
              });
            }}
          >
            <MessagePage
              getInstance={el => this.messagePage = el}
              heightSpace={50}
            ></MessagePage>
          </TabBar.Item>
          <TabBar.Item
            title="工作台"
            key="Entance"
            icon={<Icon color={'#666'} type={'pc'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'pc'} size={'md'} />}
            selected={selectedTab === 'Entance'}
            onPress={() => {
              setState({
                selectedTab: 'Entance',
                isEdit: false,
              });
            }}
          >
            <EntrancePage
              menuConfig={toJS(menuConfig)}
              activeKey={toJS(activeKey)}
              isMenuInited={isMenuInited}
              onChange={onChange}
              disableMenu={disableMenu}
              showGroup={showGroup}>
            </EntrancePage>
          </TabBar.Item>
          <TabBar.Item
            title="我"
            key="Me"
            icon={<Icon color={'#666'} type={'man'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'man'} size={'md'} />}
            selected={selectedTab === 'Me'}
            onPress={() => {
              setState({
                selectedTab: 'Me',
              });
            }}
          >
            <AboutPage />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
